<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>元素周期表</title>
    <link rel="stylesheet" type="text/css" href="http://cool.miaov.com/170309/periodic-table/reset.css" />
    <link rel="stylesheet" href="./index.css">
    <script src="http://cool.miaov.com/170309/periodic-table/js/data.js" type="text/javascript" charset="utf-8"></script>
    <script src="http://cool.miaov.com/170309/periodic-table/js/function%20createElements.js" type="text/javascript" charset="utf-8"></script>
    <script src="http://cool.miaov.com/170309/periodic-table/js/function%20table.js" type="text/javascript" charset="utf-8"></script>
    <script src="http://cool.miaov.com/170309/periodic-table/js/function%20montion.js" type="text/javascript" charset="utf-8"></script>
    <script src="http://cool.miaov.com/170309/periodic-table/js/function%20grid.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <div style="perspective: 800px; position: relative;">
        <div id="container">
            <div id="box">
            </div>
        </div>
    </div>
    <div id="menu">
        <button>TABLE</button>
        <button>SPHERE</button>
        <button>HELIX</button>
        <button>GRID</button>
        <button>RESET</button>
    </div>
    <script type="text/javascript">
        var container = document.getElementById('container');
        var box = document.getElementById('box');
        var menu = document.getElementById('menu');
        var div = document.getElementsByTagName('div')[0];
        div.style.width = container.style.width = box.style.width = window.innerWidth + 'px';
        div.style.height = container.style.height = box.style.height = window.innerHeight + 'px';
        createElements();
        var eles = document.getElementsByClassName('element');
        initialization();
        menu.style.left = (0.5 * window.innerWidth - 0.5 * menu.clientWidth) + 'px';
        window.onresize = function () {
            for (var i = 0; i < eles.length - 2; i++) {
                var n = parseFloat(getComputedStyle(eles[i]).width);
                var m = parseFloat(getComputedStyle(eles[i]).height);
                var x = window.innerWidth - 18 * n * 0.18;
                var y = window.innerHeight - 10 * m * 0.45;
                eles[i].style.transform = 'scale(0.45) translateX(' + (x / 2 + (table[i].column - 1) * (n + 20)) +
                    'px) translateY(' + (y / 2 + (table[i].row - 1) * (m + 20)) + 'px)';
            }
            menu.style.left = (0.5 * window.innerWidth - 0.5 * menu.clientWidth) + 'px';
            container.style.width = box.style.width = window.innerWidth + 'px';
            document.body.style.height = container.style.height = box.style.height = window.innerHeight + 'px';
        }
        function randomNum(min, max) {
            var random = Math.random() * (max - min) + min;
            random = Math.round(random);
            return random;
        }
        function initialization() {
            for (var i = 0; i < eles.length - 2; i++) {
                var n = parseFloat(getComputedStyle(eles[i]).width);
                var m = parseFloat(getComputedStyle(eles[i]).height);
                eles[i].style.transform = 'scale(0.45) translate3D(' + randomNum(0 * window.innerWidth, 2.2 * window.innerWidth) +
                    'px,' + randomNum(0 * window.innerHeight, 2.2 * window.innerHeight) + 'px,' + randomNum(-100, 500) +
                    'px)';
            }
            setTimeout(function () {
                for (var i = 0; i < eles.length - 2; i++) {
                    montion(eles[i], function () {
                        var x = window.innerWidth - 18 * n * 0.18;
                        var y = window.innerHeight - 10 * m * 0.45;
                        this.style.transform = 'scale(0.45) translateX(' + (x / 2 + (table[i].column -
                            1) * (n + 20)) + 'px) translateY(' + (y / 2 + (table[i].row - 1) * (m +
                            20)) + 'px)';
                    })
                }
            }, 300)
        }
        var btns = document.getElementById('menu').children;
        for (var i = 0; i < btns.length; i++) {
            btns[i].onmousedown = btns[i].onmouseup = function (ev) {
                ev.cancelBubble = true;
            }
        }
        btns[0].onclick = function () {
            for (var i = 0; i < eles.length - 2; i++) {
                var n = parseFloat(getComputedStyle(eles[i]).width);
                var m = parseFloat(getComputedStyle(eles[i]).height);
                var x = window.innerWidth - 18 * n * 0.18;
                var y = window.innerHeight - 10 * m * 0.45;
                tableMod(eles[i], n, m, i, x, y);
            }
        }
        btns[2].onclick = function () {
            helixMod();
        }
        btns[3].onclick = function () {
            for (var i = 0; i < eles.length - 2; i++) {
                grid(eles[i], i)
            }
        }
        btns[4].onclick = function () {
            this.setAttribute('isclicked', 'true');
            montion(box, function () {
                this.style.transform = 'matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)';
            })
            montion(container, function () {
                this.style.left = '0px';
                this.style.top = '0px';
                this.style.transform = 'matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)';
            })
        }
        for (var i = 0; i < eles.length - 2; i++) {
            eles[i].onmouseenter = function () {
                this.style.transition = '';
                this.style.boxShadow = '0px 0px 20px rgba(0, 255, 255, 1)';
                this.style.border = '1px solid rgba(127, 255, 255, 1)';
            }
            eles[i].onmouseleave = function () {
                this.style.boxShadow = '';
                this.style.boxShadow = '0px 0px 12px rgba(0, 255, 255, 0.5)';
                this.style.border = '1px solid rgba(127, 255, 255, 0.25)';
            }
        }
    </script>
    <script src="http://cool.miaov.com/170309/periodic-table/js/function%20helix.js" type="text/javascript" charset="utf-8"></script>
    <script src="http://cool.miaov.com/170309/periodic-table/js/function%20mouse.js" type="text/javascript" charset="utf-8"></script>
    <script src="http://cool.miaov.com/170309/periodic-table/js/function%20SPHERE.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
